<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>RGB Color</title>
</head>
<body>

<style>
.APP{
margin: 0 auto;
text-align: center;
}
.color{
margin: 0 auto;
text-align: center;
border: 1px solid rgb(160,160,160);
}
.number{
width: 3em;
text-align: center;
padding: 0.2em;
margin: 0.2em;
}
text{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
</style>

<script>
function r(){
document.getElementById("r_number").value = document.getElementById("r_color").value;
setColor();
}
function g(){
document.getElementById("g_number").value = document.getElementById("g_color").value;
setColor();
}
function b(){
document.getElementById("b_number").value = document.getElementById("b_color").value;
setColor();
}

function r_num(){
document.getElementById("r_color").value = document.getElementById("r_number").value;
setColor();
}
function g_num(){
document.getElementById("g_color").value = document.getElementById("g_number").value;
setColor();
}
function b_num(){
document.getElementById("b_color").value = document.getElementById("b_number").value;
setColor();
}

function setColor(){
	document.getElementById("color").setAttribute("style", 'background: rgb('+document.getElementById("r_color").value+', '+document.getElementById("g_color").value+', '+document.getElementById("b_color").value+'); width: 7em; height: 7em;');

	document.getElementById("text_color").innerHTML = "RGB: "+document.getElementById("r_color").value+", "+document.getElementById("g_color").value+", "+document.getElementById("b_color").value
}
</script>



<div class="APP"><text>R: </text>
<input class="number" onchange="r_num()" id="r_number" type="" name=""><input class="value_range" id="r_color" type="range" min="0" max="255" step="1" value="0" oninput="r()"><br>
<text>G: </text><input class="number" onchange="g_num()" id="g_number" type="" name=""><input class="value_range" id="g_color" type="range" min="0" max="255" step="1" value="0" oninput="g()"><br>
<text>B: </text><input class="number" onchange="b_num()" id="b_number" type="" name=""><input class="value_range" id="b_color" type="range" min="0" max="255" step="1" value="0" oninput="b()">

<pre id="text_color">RGB: 0, 0, 0</pre>
<div class="color" id="color" style="background: rgb(0, 0, 0); width: 7em; height: 7em;"><br></div>
</div>

<script>
	r();g();b();
</script>

</body>
</html>